import { Form } from 'antd';
import classnames from 'classnames';
import type { FormItemProps } from 'antd/lib/form';
import { FC, ReactNode } from 'react';
import './index.less';

interface OwnProps {
  renderLabel?: () => ReactNode;
  showRequired?: boolean;
  labelClassName?: string;
}

const Index: FC<FormItemProps & OwnProps> = ({
  renderLabel,
  label,
  rules,
  style,
  className,
  labelClassName,
  showRequired = true,
  children,
  ...props
}) => {
  return (
    <div className={classnames('c-form-item-container', className)} style={style}>
      <div
        className={classnames(
          'c-form-item-label',
          {
            'c-form-item-label-required': rules?.some((item: any) => item.required) && showRequired,
          },
          labelClassName,
        )}
      >
        {renderLabel ? renderLabel() : label}
      </div>
      <Form.Item {...props} rules={rules} label={false}>
        {children}
      </Form.Item>
    </div>
  );
};
export default Index;
